<template>
    <view class="confirmOrder pb-200">
        <Navigation title="确认订单" background="#fff" />
        <view class="f ai-c ph-32 pv-32 address" v-show="params.type == 0">
            <image :src="detail.picUrl" class="w-100 h-100 b-14 mr-24"></image>
            <view class="f f1 fd-c">
                <view class="fs-32 fw-600 text-color4">{{detail.name}}</view>
                <view class="mt-8 fs-26 text-color2">{{detail.addressName}}{{detail.addressDetail}}</view>
				<!-- {{detail.name}} -->
            </view>
        </view>
        <view class="pv-32 ph-40 address" v-show="params.type == 1">
            <view class="mt-25">
                <view class="f ai-c jc-s-b">
                    <view class="f ai-c">
                        <view class="w-104 h-32 b-4 default f ai-c jc-c fs-22 text-color5" v-show="addressData.defaultStatus">默认地址</view>
                        <view class="ml-16 fs-28 fw-500 text-color4">{{ addressData.name }} {{ addressData.mobile }}</view>
                    </view>
                    <image src="http://cwht.ricecs.cn/app/shop/edit.png" class="w-32 h-32"></image>
                </view>
                <view class="fs-24 text-color3 mt-16">地址：{{ addressData.areaName }}{{ addressData.detailAddress }}</view>
            </view>
        </view>
        <!-- 医生 -->
        <view class="background-white mt-20 ph-28 pv-28 f jc-s-b list b-24">
           <image :src="staff.avatar" class="w-120 h-120 b-12 mr-20 mt-10"></image>
            <view class="f fd-c f1">
                <view class="f ai-c jc-s-b w-f">
                    <view class="f ai-c f1">
                        <view class="fs-30 fw-600 text-color4">{{staff.name}}</view>
                        <view class="w-112 h-28 b-4 f ai-c jc-c fs-20 level ml-12">中级美容师</view>
                    </view>
                    <!-- <view class="w-144 h-56 b-56 fs-26 text-color5 f ai-c jc-c btn" @click="toSubscribe">立即预约</view> -->
                </view>
               <view class="f mt-16 ai-c">
                   <view class="f">
                       <image :src="index < staff.score ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                   </view>
                   <view class="fs-28 fw-600 text-color ml-12">{{staff.score}}</view>
               </view>
               <view class="f mt-16">
                 <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag" v-for="(v,k) in staff.skillings">{{v}}</view>
               </view>
                <view class="f mt-12">
                    <view class="fs-24 text-color3">个人简介：</view>
                    <view class="f f1 text-ellipsis-1 text-color4 fs-24">{{staff.introduction}}</view>
                </view>
                <!-- <view class="f mt-12">
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                </view> -->
            </view>
        </view>
        <!-- 商品 -->

        <view class="mt-20 background-white b-24 ph-32 pv-32">
            <view class="f ai-c mt-33">
                <image :src="shop.picUrls[0]" class="w-160 h-160 b-12 mr-32"></image>
                <view class="f fd-c f1">
                    <view class="fs-32 fw-600 text-color4">{{shop.name}}</view>
                    <view class="mt-12">
                        <text class="fs-22 text-color8">¥</text>
                        <text class="fs-36 fw-600 text-color8">{{shop.price}}</text>
                    </view>
                    <view class="f ai-c jc-f-e">
                        <u-number-box v-model="num"></u-number-box>
                    </view>
                </view>
            </view>
        </view>
        <view class="background-white mt-20 pv-32 ph-32 b-24">
            <view class="f ai-c jc-s-b mb-32">
                <view class="fs-26 text-color3">商品金额</view>
                <view class="f ai-c">
                    <view class="fs-26 fw-600 text-color4 mr-40">¥{{orderData.price.totalPrice}}</view>

                    <u-icon name="arrow-right" color="#D8D8D8" size="10"></u-icon>
                </view>

            </view>
            <view class="f ai-c jc-s-b mb-32" @click="toCoupon">
                <view class="fs-26 text-color3">优惠券</view>
                <view class="f ai-c">
					<view class="fs-26 text-color4 mr-40" v-if="couponData">
					    <view v-if="couponData.discountType == 1">满{{ couponData.usePrice }}减{{ couponData.discountPrice }}</view>
					    <view v-if="couponData.discountType == 2">{{ couponData.discountPercent }}折</view>
					</view>
                    <view class="fs-26 text-color4 mr-40" v-else>请选择</view>
                    <u-icon name="arrow-right" color="#D8D8D8" size="10"></u-icon>
                </view>
            </view>
            <view class="f ai-c jc-s-b mb-32">
                <view class="fs-26 text-color3">支付方式</view>
                <view class="f ai-c">
                    <view class="fs-26 text-color4 mr-40">微信支付</view>
                    <u-icon name="arrow-right" color="#D8D8D8" size="10"></u-icon>
                </view>
            </view>
            <view class="f ai-c jc-s-b">
                <view class="fs-26 text-color3">服务时间</view>
                <view class="f ai-c">
                    <view class="fs-26 text-color4 mr-60">{{params.date.date}} {{params.timesName}}</view>
                </view>
            </view>
        </view>
        <view class="background-white b-24 ph-32 h-100 mt-20 f ai-c jc-s-b">
            <view class="fs-26">
                <text class="text-color3">拥有积分</text>
                <text class="text-color4">({{ orderData.totalPoint||0 }}) ， 可抵扣</text>
                <text class="text-color8 fw-600">{{ orderData.price.pointPrice }}</text>
                <text class="text-color4">元</text>
            </view>
             <image :src="params.pointStatus ? selectCheck : select" class="w-32 h-32" @click="changePoint"></image>
        </view>

        <view class="f ai-c jc-s-b bot h-168 w-f pl-32 pr-40" :style="{ paddingBottom: safeAreaBottom + 'px' }">
            <view>
                <text class="fs-22 text-color8">¥</text>
                <text class="fs-36 fw-600 text-color8">{{ orderData.price.payPrice }}</text>
            </view>
            <view class="w-200 h-80 b-80 fs-28 fw-500 text-color5 btn f ai-c jc-c" @click="toConfirmOrder">提交订单</view>
        </view>
    </view>

 <!-- 优惠券 -->
    <Coupon ref="coupon" :list="list" :orderData="orderData" :params="params" @selectCoupon="selectCoupon" />
</template>
<script setup lang="ts">

import Coupon from './Coupon.vue';
import { ref, computed } from 'vue';
import { onLoad,onShow } from '@dcloudio/uni-app';
import { useAuthStore } from '@/store/modules/auth';
import { phoneNumbe } from '@/utils/global';
import { addressGetDefault } from '@/services/api/address';
import { storeDetail } from '@/services/api/shop/index';
import { orderCreate, orderSubmit, ordersettlement } from '@/services/api/shop/order';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import selectCheck from '@/static/select-check.png';
import select from '@/static/select.png';
import {socialUser} from "@/services/api/index";
const coupon = ref();
const type = ref(0);
const authStore = useAuthStore();

const num = ref(1);
const couponData = ref();
const list = ref<any[]>([]);
const staff = ref<any>({});
const shop = ref<any>({});
const detail = ref<any>({});
const addressData = ref<any>({
	addressName:'',
	mobile:'',
	name:'',
	detailAddress:'',
	areaName:'',
});
const params = ref<any>({
    serverItems: [],
    pointStatus: false,
    //1, "快递发货" 2, "用户自提"
    deliveryType: 1,
    type: 1,
    addressId: null,
    couponId: null,
    remark: '',
    store_id: '',
});
const orderData = ref<any>({});
const couponList = ref([]);
const openid = ref('');
const toCoupon = () => {
    coupon.value.getShow(true);
};
onLoad(async(options: any) => {
	params.value = uni.getStorageSync('sub_buy')
	staff.value = uni.getStorageSync('subscribe')
	shop.value = uni.getStorageSync('shop')
	addressData.value = uni.getStorageSync('addressData')
	getStore();
	getOrdersettlement();
  if(authStore.getOpenId){
    openid.value = authStore.getOpenId
  }else{
    await getLogin()
  }
});

async function getLogin(){
  uni.login({
    provider: 'weixin',
    success: async (res) => {
      let result = await socialUser({ userID:authStore.getUserId,type: 10, state: '123', code: res.code });
      openid.value = result.data.openid
    },
  })
}
async function getStore() {
    const { data } = await storeDetail({ storeId: params.value.store_id });
    detail.value = data;
}
//是否使用积分
function changePoint() {
    params.value.pointStatus = !params.value.pointStatus;
    getOrdersettlement();
}
//选择的优惠券
async function selectCoupon(data: any) {
    couponData.value = data;
    params.value.couponId = data.id;
    getOrdersettlement();
}
//获取结算信息
async function getOrdersettlement() {
    // const itemsData: any = [];
    let itemsData = {
       spuId: shop.value.id,
       staffId: staff.value.id,
       selectedServerTimeSlot: params.value.times,
       serverStartTime: '2024-'+params.value.date.date,
       serverEndTime: '2024-'+params.value.date.date,
       count: 1
   };
    const { data } = await ordersettlement({
        serverItems: itemsData,
        addressId: addressData.value.id || null,
        pointStatus: params.value.pointStatus,
        type: params.value.type,
        couponId: params.value.couponId,
        onsit: params.value.type,
    });
    orderData.value = data;
    // getCoupon();
}


//结算
async function toConfirmOrder() {
    // if (!addressData.value) {
    //     uni.showToast({
    //         title: '请选择地址',
    //         icon: 'none',
    //     });
    //     return;
    // }

    // params.value.items = [];
	let itemsData = {
	    spuId: shop.value.id,
	    staffId: staff.value.id,
	    selectedServerTimeSlot: params.value.times,
	    serverStartTime: '2024-'+params.value.date.date,
	    serverEndTime: '2024-'+params.value.date.date,
	    count: 1
	};
	  params.value.serverItems = itemsData;
	  params.value.terminal = 10;
	  // params.value.deliveryType = params.value.type;
	  params.value.deliveryType = params.value.type==0?2:1;

	  let reqData = {
		  serverItems:itemsData,
		  terminal:10,
		  couponId:params.value.couponId,
		  addressId:addressData.id,
		  pickUpStoreId:detail.value.id,
		  pointStatus:params.value.pointStatus,
		  onsit:params.value.type,
		  type:params.value.type,
		  receiverName:authStore.getUserInfo.nickname?authStore.getUserInfo.nickname:authStore.getUserInfo.mobile,
		  receiverMobile:authStore.getUserInfo.mobile,
		  deliveryType:params.value.type==0?2:1,
	  }
    const { data } = await orderCreate(reqData);
    pay(data);
}
//调起支付
async function pay(data: any) {
     let result =  await orderSubmit({ id: data.payOrderId, channelCode: 'wx_lite', channelExtras: { openid: openid.value } });
	let displayContent = JSON.parse(result.data.displayContent);
	await uni.requestPayment({
		provider: "wxpay",
		timeStamp: displayContent.timeStamp,
		nonceStr: displayContent.nonceStr,
		package: displayContent.packageValue,
		signType: displayContent.signType,
		paySign: displayContent.paySign,
		success(res2) {
			uni.showToast({
			    title: '支付成功',
			});
			setTimeout(() => {
			    uni.redirectTo({
			    	url:'/pages_mine/order'
			    })
			}, 1000);

		},
		fail(e) {
			uni.showToast({
				title: '支付失败,请重新支付',
				icon: 'none'
			})
			setTimeout(() => {
			    uni.redirectTo({
			    	url:'/pages_mine/order'
			    })
			}, 1000);
		}
	})
}

//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.confirmOrder {
    background: #f2f2f2;
    min-height: 100vh;
    .tag2 {
        background: #f0f2f5;
        color: #5769a0;
    }
    .tag {
        background: #fff5f5;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        z-index: 111;
        .btn {
            background: #fabb3c;
        }
    }
    ::v-deep.u-number-box__plus {
        background: #fff !important;
        width: 40rpx !important;
    }
    ::v-deep .u-number-box__minus {
        background: #fff !important;
        width: 40rpx !important;
    }
    ::v-deep .u-icon__icon {
        font-size: 20rpx !important;
    }
    ::v-deep .u-number-box__input {
        width: 80rpx !important;
        height: 40rpx !important;
        background: #f4f4f4 !important;
        border-radius: 4rpx !important;
        font-family: PingFangSC-Medium;
        font-weight: 500 !important;
        font-size: 24rpx !important;
        color: #1a1a1a !important;
    }
    .background-white {
        background: #fff;
    }
    .address {
        background: #fff;
        border-radius: 0 0 24rpx 24rpx;
    }
    .default {
        background: #f54040;
    }
}
</style>
